<template>
  <div class="ditchBox">
    <Loading :loading="loading">
      <Form ref="dataModule" :label-width="130" :model="dataModule" inline :rules="ruleValidate">
        <FormItem label="规则类型" prop="ruleType" style="width:50%">
          <RadioGroup v-model="dataModule.ruleType" @on-change="handleTypeGadio">
            <Radio v-for="item in typeRadioData" :key="item.value" :label="item.value">{{item.label}}</Radio>
          </RadioGroup>
          <!-- <span v-else>产品规则</span> -->
      </FormItem>

        <FormItem label="所属商户" prop="merchantSelect" style="width:50%">
          <Select v-model="dataModule.merchantSelect" :label-in-value="true" placeholder="请选择" v-if="isView" @on-change="bindleMCode">
            <Option v-for="(item, index) in merchantNameSelect" :key="item + index" :value="item.value">{{ item.label }}</Option>
          </Select>
          <span v-else>{{dataModule.merchantName}}</span>
        </FormItem>

        <FormItem label="所属产品" prop="productSelect" style="width:50%">
          <Select v-model="dataModule.productSelect" :label-in-value="true" placeholder="请选择" v-if="isView" @on-change="bindleProductCode">
            <Option v-for="(item, index) in productNameSelect" :key="index" :value="item.value">{{ item.label }}</Option>
          </Select>
          <span v-else>{{dataModule.productName}}</span>
        </FormItem>
        <FormItem label="产品编码"  style="width:50%">
          <Input type="text" v-model="dataModule.productCode" v-if="isView" placeholder="请填写"/>
          <span v-else>北京市</span>
        </FormItem>
        <FormItem prop="ruleName" label="规则名称" style="width:50%">
          <Input type="text" v-model="dataModule.ruleName" placeholder="请填写,字数不超过25个" maxlength="25"/>
        </FormItem>
        <FormItem label="结算类型" prop="settlementType" style="width:50%">
          <Select v-model="dataModule.settlementType" placeholder="请选择" @on-change="handleCloseType">
            <Option v-for="(item, index) in closeTypeData" :key="item + index" :value="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
        <FormItem prop="productPrice" label="产品单价" style="width:50%">
          <Input type="text" v-model="dataModule.productPrice" placeholder="请填写"/>
        </FormItem>

        <Row>
          <Col span="11">
            <FormItem label="清分周期类型" prop="clearingCycleMode" style="width:50%">
              <Radio-group v-model="dataModule.clearingCycleMode">
                  <Radio label="male">天</Radio>
                  <Radio label="female">月</Radio>
              </Radio-group>
            </FormItem>
          </Col>
          <Col span="11">
            <FormItem prop="clearingCycleValue" label="清分周期值" style="width:50%">
              <Input type="text" v-model.trim="dataModule.clearingCycleValue" placeholder="请填写"/>
            </FormItem>
          </Col>
        </Row>

        <FormItem prop="clearingCycleValueExt" label="清分周期拓展值" style="width:50%">
          <Input type="text" v-model="dataModule.clearingCycleValueExt" placeholder="请填写"/>
        </FormItem>
        <div class="introduce">
          <span class="introduceOne">按天： 无需填写</span>
          <span>按月： 填写整数，表示几号</span>
        </div>
        <FormItem label="清分规则" :prop="closeTypeDataType ? 'clearingRule' : ''" style="width:50%">
          <div v-if="!closeTypeDataType">百分比</div>
          <Radio-group v-model="dataModule.clearingRule" v-else>
            <Radio label="0">百分比</Radio>
            <Radio label="1">固定金额</Radio>
          </Radio-group>
        </FormItem>
        <!-- <FormItem label="清分规则" prop="clearRule" v-else>
          <div>百分比</div>
        </FormItem> -->
        <Row>
          <Col span="12">
            <FormItem label="平台应收" :prop="closeTypeDataType ? 'platformReceivable' : ''" style="width:50%">
              <Input type="text" v-model="dataModule.platformReceivable" v-if="closeTypeDataType" placeholder="请填写"/>
              <div v-else>100%</div>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="商户应收" :prop="closeTypeDataType ? 'merchantReceivable' : ''" style="width:50%">
              <Input type="text" v-model="dataModule.merchantReceivable"  v-if="closeTypeDataType" placeholder="请填写"/>
              <div v-else>0%</div>
            </FormItem>
          </Col>
        </Row>

        <FormItem label="有效时间" prop="validTime" style="width:50%">
          <DatePicker :value='[dataModule.effectiveDate, dataModule.expireDate]' format="yyyy-MM-dd" type="daterange" split-panels placeholder="请选择" @on-change="setDateRange" clearable></DatePicker>
        </FormItem>
        <FormItem label="优先级" prop="priorityLevel" style="width:50%">
          <Input type="text" v-model.trim="dataModule.priorityLevel" placeholder="请填写"/>
        </FormItem>

        <div style="text-align: center; margin-top: 20px">
          <Button style="margin-right: 10px" @click="handleSubmitCancel('dataModule')">取消</Button>
          <Button type="primary" @click="handleSubmit('dataModule')">确定</Button>
        </div>
      </Form>
    </Loading>
  </div>
</template>
<script>
import config from "@/utils/config";
import { namespace } from "../module/rule.js";
import {
  Button,
  Input,
  Modal,
  Message,
  Col,
  Row,
  Form,
  FormItem,
  DatePicker,
  Select,
  Option,
  Card,
  Radio,
  RadioGroup
} from "view-design";
import Loading from "@/components/Loading";
import RemoteTable from "@/components/RemoteTable";
import RemoteSelect from "@/components/RemoteSelect";
import RemoteTableSelect from "@/components/RemoteTableSelect";
import SearchBar from "@/components/SearchBar";
import Uuid from "uuid";
import Authc from "@/components/Authc";
import appService from "@/utils/appService";
export default {
  components: {
    Loading,
    RemoteTable,
    SearchBar,
    SearchBarItem: SearchBar.SearchBarItem,
    RemoteSelect,
    Authc,
    Button,
    Input,
    Modal,
    Message,
    Col,
    Row,
    Form,
    FormItem,
    DatePicker,
    Select,
    Option,
    Card,
    Radio,
    RadioGroup
  },
  props: ["id"],
  beforeMount: async function() {
    // let id = this.$route.params.id;
    // let response = await this.$store.dispatch(`${namespace}/getDetail`, {
    //   id: id
    // });
    // if (response.errorCode === 0) {
    //   this.dataModule = response.data;
    // }
  },
  data: function() {
    return {
      isProp: true,
      isView: true,
      namespace: namespace,
      isClear: true,
      dataModule: {
        // ruleType: '',
        // merchantCode: '0',
        productName: "",
        // ruleName: '',
        // settlementType: '',
        // productPrice: '',
        // clearingCycleMode: '',
        // clearingCycleValue: '',
        // clearingCycleValueExt: '',
        // clearingRule: '',
        // platformReceivable: '',
        // merchantReceivable: '',
        // validTime: [],
        // priorityLevel: ''
      },
      ruleValidate: {
        ruleType: [
          {
            required: true,
            type: "number",
            message: "请选择",
            trigger: "change"
          }
        ],
        merchantSelect: [
          {
            required: true,
            type: "number",
            message: "请选择",
            trigger: "change"
          }
        ],
        productSelect: [
          { required: true, message: "请选择", trigger: "change" }
        ],
        ruleName: [{ required: true, message: "请填写", trigger: "blur" }],
        settlementType: [
          { required: true, message: "请选择", trigger: "change" }
        ],
        productPrice: [{ required: true, message: "请填写", trigger: "blur" }],
        clearingCycleMode: [
          { required: true, message: "请选择", trigger: "change" }
        ],
        clearingCycleValue: [
          { required: true, message: "请填写", trigger: "blur" }
        ],
        clearingCycleValueExt: [
          { required: true, message: "请填写", trigger: "blur" }
        ],
        clearingRule: [
          { required: true, message: "请选择", trigger: "change" }
        ],
        platformReceivable: [
          { required: true, message: "请填写", trigger: "blur" }
        ],
        merchantReceivable: [
          { required: true, message: "请填写", trigger: "blur" }
        ],
        validTime: [
          {
            type: "array",
            required: true,
            message: "有效期不能为空",
            fields: {
              0: {
                required: true,
                message: "有效期不能为空",
                trigger: "change"
              },
              1: {
                required: true,
                message: "有效期不能为空",
                trigger: "change"
              }
            }
          }
        ],
        priorityLevel: [{ required: true, message: "请填写", trigger: "blur" }]
      },
      // 所属产品
      productNameSelect: [
        {
          label: "产品111",
          value: "1"
        },
        {
          label: "产品222",
          value: "2"
        }
      ],
      merchantNameSelect: [
        {
          label: "商户名称1",
          value: 1
        },
        {
          label: "商户名称2",
          value: 2
        },
        {
          label: "商户名称3",
          value: 3
        }
      ],
      // 结算类型
      closeTypeData: [
        {
          label: "清分",
          value: "0"
        },
        {
          label: "结算",
          value: "1"
        }
      ],
      closeTypeDataType: true,
      //
      typeRadioData: [
        {
          label: "产品规则",
          value: 1
        },
        {
          label: "通用规则",
          value: 2
        }
      ],
      typeRadioDataType: true,
      ruleFormData: {
        organizationCode: [
          { required: true, message: "请选择", trigger: "change" }
        ],
        merchantName: [{ required: true, message: "请填写", trigger: "blur" }],
        openingBank: [{ required: true, message: "请填写", trigger: "blur" }],
        accountName: [{ required: true, message: "请填写", trigger: "blur" }],
        accountType: [
          { required: true, message: "请选择", trigger: "change" }
        ],
        accountNo: [{ required: true, message: "请填写", trigger: "blur" }],
        channelListType: [
          {
            required: true,
            type: "array",
            message: "请选择",
            trigger: "change"
          }
        ],
        beginTime: [
          {
            type: "array",
            required: true,
            message: "请选择",
            fields: {
              0: { required: true, message: "请选择", trigger: "blur" },
              1: { required: true, message: "请选择", trigger: "blur" }
            }
          }
        ]
      }
    };
  },
  created() {},
  methods: {
    bindleProductCode(val) {
      console.log(val);
      this.dataModule.productName = val.label || "";
      this.dataModule.productCode = val.value || "";
    },
    handleCloseType(val) {
      if (val === "1") {
        this.closeTypeDataType = false;
        console.log(val, "结算类型");
        this.$refs["dataModule"].fields.forEach(e => {
          if (
            e.prop == "clearRule" ||
            e.prop == "platformReceivable" ||
            e.prop == "commercialReceivable"
          )
            e.resetField();
        });
      } else {
        this.closeTypeDataType = true;
      }
    },
    bindleMCode(val) {
      console.log(val);
      this.dataModule.merchantName = val.label || "";
      this.dataModule.merchantCode = val.value || "";
    },
    // 规则类型
    handleTypeGadio(val) {
      console.log(val, "规则类型");
      if (val === "产品规则") {
        this.typeRadioDataType = true;
      } else {
        this.typeRadioDataType = false;
      }
    },
    setDateRange(value) {
      this.dataModule.beginTime = value;
      this.dataModule.contractStartDate = value[0];
      this.dataModule.contractEndDate = value[1];
    },
    handleSubmit(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          this.$store.dispatch(`${namespace}/save`, this.dataModule);
          // this.dataModule = {};
          this.$router.push("commercial");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleSubmitCancel(name) {
      this.$router.go(-1);
      this.$refs[name].resetFields();
    }
  },
  computed: {
    loading: function() {
      let result = this.$store.state[namespace].loading;
      return result;
    }
  }
};
</script>

<style lang="less">
.ditchBox {
  .ditchTitle {
    margin-bottom: 20px;
  }
  .ivu-date-picker {
    width: 100%;
  }
}
</style>


